

let $ = layui.jquery;

export default class updateInfo { 
  constructor(data){ 
    this.render();
    this.handle(data);
  }

  render() { 
    let template = `
    <div class="layui-container">
            <div class="layui-row">
              <div class="layui-col-md6">
                <form class="layui-form" lay-filter="updateForm">
                  <div class="layui-form-item">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                      <input
                        type="text"
                        name="title"
                        autocomplete="off"
                        class="layui-input"
                      />
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">发布时间</label>
                    <div class="layui-input-block">
                      <input
                        type="text"
                        name="date"
                        autocomplete="off"
                        class="layui-input"
                      />
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">配图</label>
                    <div class="layui-input-block imgsDiv">
                     
                    </div>
                  </div>


                  <div class="layui-form-item">
                  <label class="layui-form-label">文段</label>
                  <div class="layui-input-block">
                    <input
                      type="text"
                      name="text"
                      autocomplete="off"
                      class="layui-input"
                    />
                  </div>
                </div>
                
                <div class="layui-form-item">
                  <label class="layui-form-label">评论</label>
                  <div class="layui-input-block">
                    <input
                      type="text"
                      name="comment"
                      autocomplete="off"
                      class="layui-input"
                    />
                  </div>
                </div>
                  
                 
                  
                 
                </form>
              </div>
            </div>
          </div>
    `;

    $("#updateInfo").html(template);
  }

  handle(data) { 
    let form = layui.form;
    let table = layui.table;

    layer.open({
        type: 1,
        area: ["600px", "500px"],
        content: $("#updateInfo").html(),
        btn: ["修改", "取消"],
        btnAlign: "c",
        shade: 0.5,
        success: function () {
          //处理imges字段格式
            $("input[name='title']").val(data.title);
            let time=data.date.slice(0,10);
            $("input[name='date']").val(data.date);
            $("input[name='date']").val(time);
            let imgs="";
            for(let i=0;i<data.image.length;i++){
              console.log(data.image[i].img)
              imgs+=`
              <div>
                     <img style="width:280px;height:200px" src="http://127.0.0.1:3001/${data.image[i].img}" alt="图片信息有误">
              <div>
              `
             }
             imgs=imgs.trim();//去除前后空格
            $(".imgsDiv").html(imgs);
            let texts=""
            for(let i=0;i<data.image.length;i++){
                texts+=data.image[i].text+" "
            }
             texts=texts.trim();
            $("input[name='text']").val(texts);
            let comments=" "
            for(let i=0;i<data.comment.length;i++){
                comments+=" "+data.comment[i]
            }
            $("input[name='comment']").val(comments);
            form.render();

        },
        yes: function () {
          //注意下面使用的map方法是jquery的map方法
          //获取到的还是jquery的类型，所以最后需要get()转换为原生的数组对象

          //处理image字段
         let imgs=$("input[name='imgs']").val().split(" ");
         let text= $("input[name='text']").val().split(" ");
         let obj="";
         let arr=[]
         for(let i=0;i<imgs.length;i++){
            obj={img:imgs[i],text:text[i]}
            arr.push(obj)
         }
         let comment=$("input[name='comment']").val().split(" ");
         let com=[];
         for(let i=0;i<comment.length;i++){
           com.push(comment[i]);
         }
          $.ajax({
            url: "/api/info/alter/" + data._id,
            type: "put",
            contentType: "application/json",
            data: JSON.stringify({
              title: $("input[name='title']").val(),
              date: $("input[name='date']").val(),
              image:arr,
              comment:com
            }),
           
            success: function (res) {
              if (res.code === 1) {
                layer.msg(res.msg);
                layer.closeAll();
                table.reloadData("idTest", {});
              }else{
                layer.msg(res.msg, function () { 
                  setTimeout(() => {
                    layer.closeAll();
                    location.hash = "#/login";
                  }, 1);
                });
              }
            },
          });
        },
      });
      
  }
}